<template>
  <div id="mars3dContainer" class="mars3d-container">
    <video ref="videoDiv" muted autoPlay="autoPlay" :src="src" width="100%" height="100%" controls>
      <source :src="src" type="video/mp4" />
    </video>
    <Waring v-if="isWaring" :content="content" @close="isWaring = false" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import Waring from "./waring.vue";
const isWaring = ref(false);
const content = ref('水位持续上涨,预计半小时后坝前水位将达到预警水位!');
const videoDiv = ref();
const src = 'http://192.168.5.78:8000/yjmVideo.mp4'
onMounted(() => {
  // playVideo();
  setTimeout(() => {
    isWaring.value = true;
  }, 42000);
  setTimeout(() => {
    isWaring.value = false;
  }, 45000);


  setTimeout(() => {
    content.value = '水位持续上涨,预计半小时后达到设计洪水位!'
    isWaring.value = true;
  }, 54000);
  setTimeout(() => {
    isWaring.value = false;
  }, 57000);


  setTimeout(() => {
    content.value = '水位持续上涨,预计半小时后将达到校核洪水位!'
    isWaring.value = true;
  }, 62000);
  setTimeout(() => {
    isWaring.value = false;
  }, 67000);

  setTimeout(() => {
    content.value = '水位持续上涨,预计半小时后将漫坝!'
    isWaring.value = true;
  }, 74000);
  setTimeout(() => {
    isWaring.value = false;
  }, 77000);
});
const playVideo = () => {
  var playTimer;
  playTimer = setTimeout(function () {
    videoDiv.value.play(); // 当延迟时间过去后，调用play()方法开始播放视频
  }, 2000); // 传递延迟时间（毫秒）给setTimeout函数
};
</script>

<style lang="less">
.mars3d-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // border: 1px solid aqua;
  box-sizing: border-box;
  position: relative;
}

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

//播放按钮
video::-webkit-media-controls-play-button {
  display: none;
}

//进度条
video::-webkit-media-controls-timeline {
  display: none;
}

//观看的当前时间
video::-webkit-media-controls-current-time-display {
  display: none;
}

//剩余时间
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

//音量按钮
video::-webkit-media-controls-mute-button {
  display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

//音量的控制条
video::-webkit-media-controls-volume-slider {
  display: none;
}

//所有控件
video::-webkit-media-controls-enclosure {
  display: none;
}
</style>
